//1 声明变量用来缓存组件对象
var userDatagrid, userDialog, userDialogForm, userResetDialog, userResetDialogForm, selectRoleDatagrid, allRoleDatagrid;
$(function () {
  //2 使用声明的变量来缓存组件
  userDatagrid = $("#userDatagrid");
  userDialog = $("#userDialog");
  userDialogForm = $("#userDialogForm");
  userResetDialog = $("#userResetDialog");
  userResetDialogForm = $("#userResetDialogForm");
  selectRoleDatagrid = $("#selectRoleDatagrid");
  allRoleDatagrid = $("#allRoleDatagrid");
  //3 创建一个命令对象，存放所有的按钮的点击事件的回调
  cmdObj = {
    userAdd: function () {
      //清空表单
      userDialogForm.form("reset");
      //置为空否则修改过后新增也有这个id 一直修改这个id了
      $('input[name=id]').val("");
      userDialog.dialog("open").dialog("setTitle", "添加用户").dialog("center");
      selectRoleDatagrid.datagrid("loadData", {total: 0, rows: []});
    },
    userEdit: function () {
      //获取选中行
      var row = userDatagrid.datagrid("getSelected");
      console.debug(row);
      //判断是否选中
      if (!row) {
        $.messager.alert("提示", "请选中一行修改", "info");
        return;
      }
      //清空form表单
      userDialogForm.form("clear");
      //回显form表单
      userDialogForm.form("load", row);
      //不回显状态，因为有专门的按钮来修改状态，且添加和修改表单用的为同一个
      userDialog.dialog("open").dialog("setTitle", "修改用户").dialog("center");
      //回显已选择角色
      var roles = arrClone(row.roles);
      selectRoleDatagrid.datagrid("loadData", {total: roles.length, rows: roles});
    },
    userDelete: function () {
      var row = userDatagrid.datagrid("getSelected");
      if (!row) {
        $.messager.alert("提示", "请选中一行数据删除", "error");
        return;
      }
      //提示是否删除
      $.messager.confirm("提示", "确认删除吗", function (r) {
        if (r) {
          //发送ajax请求删除
          $.get("user/delete", {id: row.id}, function (result) {
            if (result.success) {
              //成功
              $.messager.alert("提示", "删除成功", "info");
              //刷新表格
              userDatagrid.datagrid("reload");
            } else {
              //给出失败的提示
              $.messager.alert("提示", result.errorCode + "--" + result.message, "error");
            }
          })
        }
      })
    },
    userRefresh: function () {
      userDatagrid.datagrid("reload");
    },
    userChange: function () {
      var row = userDatagrid.datagrid("getSelected");
      if (!row) {
        $.messager.alert("提示", "请选中一行数据修改状态", "info");
        return;
      }
      $.get("user/change", {id: row.id}, function (r) {
        if (r) {
          userDatagrid.datagrid("reload");
        } else {
          $.messager.alert("提示", "更改失败！--" + r.message, "error")
        }
      })
    },
    userSave: function () {
      // var rowDatas = selectRoleDatagrid.datagrid("getRows");
      // var a = {
      //   "id": $('input[name=id]').val(),
      //   "name": $('input[name=name]').val(),
      //   "roles": []
      // };
      //
      // for (var i = 0; i < rowDatas.length; i++) {
      //   a.roles.push({"id": rowDatas[i].id})
      // }
      // // console.log(a);
      // // $.post("role/save", a, "json");
      // $.ajax({
      //   method: "POST",
      //   url: "user/save",
      //   contentType: 'application/json',
      //   data: JSON.stringify(a),
      //   success: function (data) {
      //     if (data.success) {
      //       //关闭模态框
      //       roleDialog.dialog('close');
      //       //给出成功提示
      //       $.messager.alert("提示", "保存成功", "info");
      //       //刷新数据表格
      //       roleDatagrid.datagrid('reload');
      //     } else {
      //       //失败给出提示
      //       $.messager.alert("提示", "保存失败", "错误：" + data.errorCode + "    " + data.message);
      //     }
      //   }
      // })
      var rowDatas = selectRoleDatagrid.datagrid("getRows");
      var a = {
        "id": $('input[name=id]').val(),
        "forbidden": $('input[name=forbidden]').val(),
        "name": $('input[name=name]').val(),
        "password": $('input[name=password]').val(),
        "roles": []
      };
      console.debug(a);
      //把选择的角色id放入roles里面
      for (var i = 0; i < rowDatas.length; i++) {
        //构造角色id
        a.roles.push({"id": rowDatas[i].id});
      }
      $.ajax({
          method: "POST",
          url: "user/save",
          contentType: 'application/json',
          data: JSON.stringify(a),
          success: function (data) {
            // var result = $.parseJSON(data);
            //console.debug(result.success);
            if (data.success) {
              //成功
              //关闭模态框
              userDialog.dialog("close");
              //给出提示
              $.messager.alert("温馨提示", data.message, "info");
              //刷新表格数据
              userDatagrid.datagrid("reload");
            } else {
              //给出失败的提示
              $.messager.alert("温馨提示", data.errorCode + "-" + data.message, "error");
            }
          }
        }
      );
      //发送ajax请求
      // userDialogForm.form('submit', {
      //   url: "user/save",
      //   onSubmit: function (param) {
      //     return userDialog.form("validate");
      //   },
      //   success: function (data) {
      //     //alert(data);
      //     var result = $.parseJSON(data);
      //     //console.debug(result.success);
      //     if (result.success) {
      //       //成功
      //       //关闭模态框
      //       userDialog.dialog("close");
      //       //给出提示
      //       $.messager.alert("温馨提示", result.message, "info");
      //       //刷新表格数据
      //       userDatagrid.datagrid("reload");
      //     } else {
      //       //给出失败的提示
      //       $.messager.alert("温馨提示", result.errorCode + "-" + result.message, "error");
      //     }
      //   }
      // })
    },
    userCancel: function () {
      userDialog.dialog("close");
    },
    userReset: function () {
      var row = userDatagrid.datagrid("getSelected");
      if (!row) {
        $.messager.alert("提示", "请选中一行数据重置密码", "info");
        return;
      }
      //清空表单
      userResetDialogForm.form("clear");
      //回显表单
      userResetDialogForm.form("load", row);
      //
      userResetDialog.dialog("open").dialog("setTitle", "修改密码").dialog("center");
    },
    userResetSave: function () {
      userResetDialogForm.form('submit', {
        url: "user/reset",
        onSubmit: function (param) {
          return userResetDialog.form("validate");
        },
        success: function (data) {
          var result = $.parseJSON(data);
          //console.debug(data);
          if (result.success) {
            $.messager.alert("提示", "保存成功", "info");
            //关闭对话框
            userResetDialog.dialog("close");
            //刷新数据表格
            userDatagrid.datagrid("reload");
          } else {
            $.messager.alert("提示", "保存失败，原因：" + result.message, "error");
          }
        }

      })
    },
    userResetCancel: function () {
      userResetDialog.dialog("close");
    }

  };
  //4 初始化组件
  //4.1 初始化数据表格
  userDatagrid.datagrid({
    title: '管理员列表',
    url: 'user/list',
    pagination: true,
    rownumbers: true,
    // striped: true,
    singleSelect: true,
    fit: true,
    fitColumns: true,//列宽度
    columns: [[
      {field: 'id', title: '编号', width: 100, hidden: true},
      {field: 'name', title: '用户名称', width: 100},
      {field: 'password', title: '密码', width: 100, hidden: true},
      {field: 'forbidden', title: '激活', width: 100, formatter: userStateFormatter}
    ]],
    toolbar: '#userDatagridToolbar',
    view:detailview,
    detailFormatter: function (rowIndex, rowData) {
      return '<div  style="height:100px;border:groove"><table class="tableOrderDetial"></table></div> ';
    },
    onExpandRow: function (index, row) {
      var ddv = $(this).datagrid('getRowDetail', index).find('table.tableOrderDetial')
      ddv.datagrid({
        fit:true,
        border:false,
        url:'user/findOne?id='+row.id,
        striped: true,
        rownumbers: true,
        singleSelect: true,
        columns:[[
          {title:'id',field:'id',width:100,align:'center',sortable:true},
          {title:'role',field:'name',width:200,align:'center',sortable:true},
          ]],
        // pagination:true,
        sortName:'id',
        sortOrder:'desc'
      })
    }
  });
  // userDatagrid.datagrid({
  //   view: detailview,
  //   detailFormatter: function (index, rowData) {
  //     // return '<table><tr>' +
  //     // '<td rowspan=2 style="border:0"><img src="/static/images/' + rowData.id + '.png" style="height:50px;"></td>' +
  //     // '<td style="border:0">' +
  //     // '<p>Name: ' + rowData.name + '</p>' +
  //     // '<p>Role: ' + rowData.roles[0].name + '</p>' +
  //     // '</td>' +
  //     // '</tr></table>';
  //     return "<div><table id='ddv"+index+"'></table></div>";
  //   },
  //   onExpandRow: function (index, row) {
  //     console.debug(row);
  //     // console.debug(index);
  //     // var ddv = $(this).datagrid('getRowDetail', index).find('div.ddv');
  //     // ddv.datagrid({
  //     //   url: 'user/findOne?id='+row.id,
  //     //   pagination: true,
  //     //   rownumbers: true,
  //     //   singleSelect: true,
  //     //   fit: true,
  //     //   fitColumns: true,//列宽度
  //     //   columns: [[
  //     //     {field: 'id', title: '编号', width: 100, hidden: true},
  //     //     {field: 'name', title: '角色', width: 100},
  //     //   ]],
  //     //   onLoad:function () {
  //     //     userDatagrid.datagrid('fixDetailRowHeight',index);
  //     //     userDatagrid.datagrid('selectRow',index);
  //     //     userDatagrid.datagrid('getRowDetail',index).find('form').form('load',row);
  //     //   }
  //     // });
  //     // ddv.panel({
  //       $("#ddv"+index).datagrid({
  //         data:[{
  //           "性别":row.name,
  //           "民族":row.roles}
  //         ],
  //         width:600,
  //         height:"auto",
  //         columns:[[
  //           {field:row.name,title:"性别",width:100},
  //           {field:row.roles,title:"性别",width:100},
  //         ]],
  //       // border: false,
  //       // cache: false,
  //       // height: 300,
  //       // href: 'user/findOne?id=' + row.id,
  //       // onLoad: function () {
  //       //   userDatagrid.datagrid('fixDetailRowHeight', index);
  //       //   userDatagrid.datagrid('selectRow', index);
  //       //   userDatagrid.datagrid('getRowDetail', index).find('form').form('load', row);
  //       // }
  //     });
  //     userDatagrid.datagrid('fixDetailRowHeight', index);
  //   }
  // });
  //4.2 初始化添加修改模态框
  userDialog.dialog({
    width: 700,
    height: 500,
    closed: true,//默认关闭
    modal: true,//模态框
    pagination: true,
    buttons: "#userDialogToolbar"
  });
  //4.3 初始化重设密码模态框
  userResetDialog.dialog({
    width: 700,
    height: 200,
    closed: true,//默认关闭
    modal: true,//模态框
    pagination: true,
    buttons: "#userResetDialogToolbar"
  });
  //4.4初始化已选角色和所有角色datagrid
  selectRoleDatagrid.datagrid({
    title: '已选角色',
    pagination: true,
    singleSelect: true,
    fitColumns: true,
    height: 250,
    width: 300,
    columns: [[
      {field: 'id', title: '', width: 100, hidden: true},
      {field: 'name', title: '角色名', width: 100},
    ]],
    onDblClickRow: function (index, row) {
      selectRoleDatagrid.datagrid("deleteRow", index);
    }
  });
  allRoleDatagrid.datagrid({
    url: "role/page",
    title: '所有角色',
    singleSelect: true,
    pagination: true,
    height: 250,
    width: 300,
    fitColumns: true,
    columns: [[
      {field: 'id', title: '', hidden: true, width: 100},
      {field: 'name', title: '角色名称', width: 100}
    ]],
    onDblClickRow: function (index, row) {
      console.debug(row);
      //与已经选择了的角色对比
      var rows = selectRoleDatagrid.datagrid("getRows");
      for (var i in rows) {
        if (rows[i].id == row.id) {
          $.messager.alert("提示", "请勿重复选择角色", "info");
          return;
        }
      }
      //追加到选择角色datagrid里面
      selectRoleDatagrid.datagrid("appendRow", row);
      selectRoleDatagrid.datagrid("reload");
    }
  });
  //5 为页面上的所有的a标签注册点击事件
  $("a").on("click", function () {
    //获取标签的data-cmd属性值
    var cmd = $(this).data("cmd");
    if (cmd) {
      cmdObj[cmd + ""]();
    }
  });

});


